<!--
<template>
  <view class="i-map">
    <child-header-bar :returnIndex="returnIndex" :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="" :style="[{'height': top + 'px','width': '100%'}]"></view>

    <view class="city-box" >
      <view class="city-item" @click="toSnowPackList(item.dictValue)" v-for="(item, index) in cityList" :key="index">
          <image style="width: 136rpx;height:51rpx;" :src="'/static/index/btn_'+index+'.png'" mode="scaleToFill">
      </view>
    </view>
	
    <view class="imap-content">
      <movable-area class="area">
        <movable-view class="box" direction="all" scale="true" scale-min="0.5" scale-max="2" scale-value="0.5"
          damping="50" friction="0.8">
          <image style="position: relative;" :src="imgUrl + '/map/map.jpg?id=1'" mode="scaleToFill">
            <view v-for="(item, index) in snowPackList" :key="index" style="position: absolute;"
              @click="getSnowPack(item)"
              :style="[{'height': item.height + 'rpx','width': item.width + 'rpx','top': item.top+  'rpx','left': item.left + 'rpx'}]">
            </view>
          </image>
        </movable-view>
      </movable-area>
    </view>
    <zdy-tabbar :current-page="3"></zdy-tabbar>
  </view>
</template>
-->
<template>
  <view class="i-map">
    <child-header-bar :returnIndex="returnIndex" :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="" :style="[{'height': top + 'px','width': '100%'}]"></view>

    <view class="imap-content">
      <movable-area class="area">
        <movable-view class="box" direction="all" scale="true" scale-min="0.5" scale-max="2" scale-value="0.5"
          damping="50" friction="0.8">
          <image style="position: relative;" :src="imgUrl + '/map/map01.jpg'" mode="scaleToFill">
            <view v-for="(item, index) in snowPackList" :key="index" style="position: absolute;"
              @click="getSnowPack(item)"
              :style="[{'height': item.height + 'rpx','width': item.width + 'rpx','top': item.top+  'rpx','left': item.left + 'rpx'}]">
            </view>
          </image>
        </movable-view>
      </movable-area>
    </view>
	<view style="position:fixed;width: 100%;">
				   <image style="width: 100%;position: absolute;" :src="imgUrl + '/map/map02.jpg'">
					   <view class="city-box">
					   
					   
					     <view class="city-item" @click="toSnowPackList(item.dictValue)" v-for="(item, index) in cityList" :key="index">
					       {{item.dictLabel}}
					     </view>
					   
					   </view>
	</view>

    <zdy-tabbar :current-page="3"></zdy-tabbar>
  </view>
</template>
<script>
  let snowPackList = require('../../utils/snowPackList.js')
  export default {
    data() {
      return {
        returnIndex:true,
        imgUrl: this.$imgUrl,
        childTitle: '滑雪场直通车',
        snowPackList: [],
        snowPackSelList: [],
        top: 0,
        isChage: true,
        cityList: []
      }
    },
    onShow() {
      this.snowPackList = snowPackList.default.snowPackList
      this.selectListForApp()
      this.getCity()
    },
    methods: {
				onShareAppMessage() {
		return {
		    title: '滑雪场直通车',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '滑雪场直通车',
		    imageUrl: this.img,
		  }
		},
		
		
      // 点击城市跳转到雪场
      toSnowPackList(val) {
        console.log(val)
        uni.navigateTo({
          url: '/myPackageA/pages/easyClearSnowPack/easyClearSnowPack?city=' + val
        })
      },
      // 获取滑雪场数据
      selectListForApp() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.selectListForApp,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.snowPackSelList = res.data.data
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 获取城市数据
      getCity() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getCity + 'ski_city',
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.cityList = res.data.data
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      getSnowPack(item) {
        /* 点击确认后，获取到当前id，跳转到雪场介绍页面*/
        uni.navigateTo({
          url:'/myPackageA/pages/snowPackIntro/snowPackIntro?snowPackId=' + item.id
        })
        // uni.showModal({
        //   title: '提示',
        //   content: '确认跳转到' + item.name + '?',
        //   cancelText: "取消", // 取消按钮的文字  
        //   confirmText: "确认", // 确认按钮的文字  
        //   showCancel: true, // 是否显示取消按钮，默认为 true
        //   success: (res) => {
        //     if (res.confirm) {
        //       console.log('comfirm') //点击确定之后执行的代码
           
        //     } else {
        //       console.log('cancel') //点击取消之后执行的代码
        //     }
        //   }
        // })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>
<style lang="scss">
	page{
		background-color:#b3e0b5 ;
	}
  .pr {
    background-color: red;
  }

  .city-box {
    display: flex;
    flex-wrap: wrap;
   // padding: 10rpx 30rpx;
    position: fixed;
  //  bottom: 156rpx;
    z-index: 1111;
	margin: 0 40rpx;


    .city-item {
	font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx 40rpx;
      background:linear-gradient(#0075e2,#02dcaa);
      border-radius: 30rpx;
	  border:1.5px solid #fff;
      font-size: 28rpx;
      color: #FFFFFF;
	  font-weight: bold;
      margin: 10rpx 25rpx;
    }
  }

  .imap-content {
    display: flex;

    .area {
      width: 750rpx;
      height: 1004rpx;
    }

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200%;
      width: 200%;
      text-align: center;

      image {
        width: 1500rpx !important;
        height: 2008rpx;
        transform: translate3d(0, 0, 0) scale(1, 1);
        transform-origin: center center;
      }
    }
  }
</style>